<div class="page page-table" data-ng-controller="customerIndex">
    <section class="panel panel-default table-dynamic">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span>&nbsp;&nbsp;&nbsp;&nbsp;全局搜索列表</strong></div>
        <div class="table-filters">
            <form>
                <div class="row">
                    <div  class="col-sm-3">
                        <div class="input-group ui-datepicker" data-ng-controller="DatepickerDemoCtrl">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i>&nbsp;&nbsp;开始</span>
                            <input type="text"
                                   id="start"
                                   class="form-control"
                                   datepicker-popup="yyyy-MM-dd"
                                   ng-model="dt"
                                   is-open="opened"
                                   datepicker-options="dateOptions"
                                   close-text="关闭">
                        </div>
                    </div>
                    <div id="endDiv" class="col-sm-3">
                        <div class="input-group ui-datepicker" data-ng-controller="DatepickerDemoCtrl">
                            <span class="input-group-addon"><i class="fa fa-calendar"></i>&nbsp;&nbsp;结束</span>
                            <input type="text"
                                   id="end"
                                   class="form-control"
                                   datepicker-popup="yyyy-MM-dd"
                                   ng-model="dt"
                                   is-open="opened"
                                   datepicker-options="dateOptions"
                                   close-text="关闭">
                        </div>
                    </div>
                    <div class="col-sm-1"><a class="btn btn-primary" data-ng-click="pageChange(1,true)">查询</a></div>
                </div>
            </form>
        </div>
        <footer class="table-footer">
            <div class="row">
                <div class="col-md-6 page-num-info">
                    <span>
                        显示  共{{pageSize}}页   {{total}}条
                    </span>
                </div>
                <div class="col-md-6 text-right pagination-container">
                    <pagination class="pagination-sm"
                                page="pageNum"
                                total-items="pageSize"
                                max-size="5"
                                on-select-page="pageChange(page)"
                                items-per-page="numPerPage"
                                rotate="true"
                                boundary-links="true"></pagination>
                </div>
            </div>
        </footer>
        <table class="table table-bordered table-striped table-responsive">
            <thead>
                <tr>
                    <th style="width:140px;"><div class="th">
                        姓名
                        <span class="glyphicon glyphicon-chevron-up"
                              data-ng-click=" order('name') "
                              data-ng-class="{active: row == 'name'}"></span>
                        <span class="glyphicon glyphicon-chevron-down"
                              data-ng-click=" order('-name') "
                              data-ng-class="{active: row == '-name'}"></span>
                    </div></th>
                    <th><div class="th">
                        性别
                        <span class="glyphicon glyphicon-chevron-up"
                              data-ng-click=" order('sex') "
                              data-ng-class="{active: row == 'sex'}"></span>
                        <span class="glyphicon glyphicon-chevron-down"
                              data-ng-click=" order('-sex') "
                              data-ng-class="{active: row == '-sex'}"></span>
                    </div></th>
                    <th><div class="th">
                        电话
                        <span class="glyphicon glyphicon-chevron-up"
                              data-ng-click=" order('phone') "
                              data-ng-class="{active: row == 'phone'}"></span>
                        <span class="glyphicon glyphicon-chevron-down"
                              data-ng-click=" order('-phone') "
                              data-ng-class="{active: row == '-phone'}"></span>
                    </div></th>
                    <th><div class="th">
                        邮箱
                        <span class="glyphicon glyphicon-chevron-up"
                              data-ng-click=" order('email') "
                              data-ng-class="{active: row == 'email'}"></span>
                        <span class="glyphicon glyphicon-chevron-down"
                              data-ng-click=" order('-email') "
                              data-ng-class="{active: row == '-email'}"></span>
                    </div></th>
                    <th><div class="th">
                        QQ
                        <span class="glyphicon glyphicon-chevron-up"
                              data-ng-click=" order('qq') "
                              data-ng-class="{active: row == 'qq'}"></span>
                        <span class="glyphicon glyphicon-chevron-down"
                              data-ng-click=" order('-qq') "
                              data-ng-class="{active: row == '-qq'}"></span>
                    </div></th>
                    <th><div class="th">
                        申请时间
                        <span class="glyphicon glyphicon-chevron-up"
                              data-ng-click=" order('datetime') "
                              data-ng-class="{active: row == 'datetime'}"></span>
                        <span class="glyphicon glyphicon-chevron-down"
                              data-ng-click=" order('-datetime') "
                              data-ng-class="{active: row == '-datetime'}"></span>
                    </div></th>
                    <th style="width:220px;"><div class="th">
                        操作
                    </div></th>
                </tr>
            </thead>
            <tbody>
                <tr data-ng-repeat="info in customer">
                    <td>{{info.name}}</td>
                    <td>{{info.sex}}</td>
                    <td>{{info.phone}}</td>
                    <td>{{info.email}}</td>
                    <td>{{info.qq}}</td>
                    <td>{{info.datetime | dataFormat}}</td>
                    <td style="font-size: 12px;">
                        <a style="color:#ff9d33;" data-ng-click="phoneInfo(info.id)" href="">查看</a>
                    </td>
                </tr>
            </tbody>
        </table>
    </section>
</div>
